v-model

前面講到v-bind是單向綁定，而今天就要來講雙向綁定的v-model(Two-way Binding)

v-model常用於表單及元素來做雙向數據綁定，結合v-bind跟v-on一樣，用v-bind初始綁定與呈現資料，用v-on監聽事件來做資料更新。

v-model = v-bind + v-on 語法糖

下面兩種寫法可以達到一樣的結果!

<input v-model="message">

<input :value="message" @input="message=$event.target.value">

說明:
將value值綁定在message變數上，當值發生改變時觸發v-on綁定的input事件。
input事件綁定的函數，是將觸發input事件的目標（該input）的value值，賦給message這個變數

v-model 常用表單用法如input、checkbox、select，就來實際練習吧!

input

<div id="app">
    <input type="text" v-model="message" />
    <font>{{ message }}</font>
</div>

let app = new Vue({
  el: '#app',
  data: {
    message: 'Hello World!',
  },
});

使用 v-model 綁定Instance的 data message，在輸入框打字的同時，顯示的文字就會與輸入框的值同步。

checkbox

<div id="app">
	<input type="checkbox" v-model="check" value="1" />
	<label>checkbox 1<label>
	<input type="checkbox" v-model="check" value="2" />
	<label>checkbox 2<label>
	<input type="checkbox" v-model="check" value="3" />
	<label>checkbox 3<label>
    <input type="checkbox" v-model="check" value="4" />
	<label>checkbox 4<label>
	<p>checkbox:{{ checkArray }}</p>
</div>

let app = new Vue({
  el: '#app',
  data: {
    checkArray: [],
  },
});

透過 v-model 綁定 checkArray，當全部勾選，data呈現如下:

checkbox:["1","2","3","4"]

select

<div id="app">
	<select v-model="selected">
        <option value="">請選擇</option>
		<option value="1">選項1</option>
		<option value="2">選項2</option>
		<option value="3">選項3</option>
	</select>
	<p>選到的選項value為:{{ selected }}</p>
</div>

let app = new Vue({
    el: '#app',
    data: {
        selected: ''
    },
});

透過 v-model 綁定 selected，當點擊選項後selected的value就會同步目前選項的value。
我點擊選項1後，呈現如下:
選到的選項value為1

v-model 修飾符

• v-model.lazy

  預設是v-model 在每次 input 事件觸發後，將輸入框的值與數據進行同步。
  若添加 lazy 修飾符，則轉變為使用 change 事件進行同步，即離開輸入欄位時，才輸出資料
  參考大大的說法

• v-model.number:

  將輸入的"數值"強制轉換為Number type.

• v-model.trim:

  過濾掉輸入的首尾空白

Resource
如何理解v-model的實質為語法糖
Vue.js 學習筆記